<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>客户管理</title>
</head>

<link rel="stylesheet" href="/webjars/element-ui/2.15.13/lib/theme-chalk/index.css">
<script src="/webjars/vue/2.6.14/dist/vue.js"></script>
<script src="/webjars/element-ui/2.15.13/lib/index.js"></script>
<script src="/webjars/axios/1.6.2/dist/axios.js"></script>
<style>
    body{
        background-color: white;
    }
</style>
<body>

<div id="cust">

    <template>
        <div slot="header">
            <el-form inline>
                <el-card>
                    <el-form-item label="姓名">
                        <el-input v-model="vo.name"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="search">查询</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="success" @click="insertCust">新增</el-button>
                    </el-form-item>
                </el-card>
            </el-form>
        </div>
        <el-table :data="custList.data" height="250" border style="width: 100%"
                  stripe>
            <el-table-column type="selection"></el-table-column>
            <el-table-column prop="customerId" label="客户Id" width="180">
            </el-table-column>
            <el-table-column prop="customerName" label="客户名称" width="180">
            </el-table-column>
            <el-table-column prop="contact" label="联系方式" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址" width="180">
            </el-table-column>
            <el-table-column prop="creationDate" label="创建日期" width="180">
            </el-table-column>

            <el-table-column label="操作">
                <template slot-scope="{row}">
                    <el-button @click="updateCust(row)">修改</el-button>
                    <el-button type="danger" @click="del(row.customerId)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--        分页-->
        <el-pagination
                :page-sizes="[3,6,9]"
                :current-page.sync="vo.pageNo"
                :page-size.sync="vo.pageSize"
                @current-change="search"
                @size-change="search"
                background
                layout="prev, pager, next,sizes"
                :total="custList.count">
        </el-pagination>
    </template>

    <!--新增客户-->
    <el-dialog title="新增客户" :visible.sync="insertCustFlag" center>
        <el-radio-group v-model="labelPosition" size="small">
            <el-radio-button label="left">左对齐</el-radio-button>
            <el-radio-button label="right">右对齐</el-radio-button>
            <el-radio-button label="top">顶部对齐</el-radio-button>
        </el-radio-group>
        <div style="margin: 20px;"></div>
        <el-form :label-position="labelPosition" label-width="80px" :model="cus">
            <el-form-item label="客户名称">
                <el-input v-model="cus.customerName"></el-input>
            </el-form-item>
            <el-form-item label="联系方式">
                <el-input v-model="cus.contact"></el-input>
            </el-form-item>
            <el-form-item label="地址">
                <el-input v-model="cus.address"></el-input>
            </el-form-item>

            <el-form-item label="创建日期">

                <template>
                    <div class="block">
                        <el-date-picker v-model="cus.creationDate" type="date" placeholder="选择日期"></el-date-picker>
                    </div>
                </template>

            </el-form-item>

            <el-form-item>
                <el-button @click="doinsert" type="primary">提交</el-button>
                <el-button @click="insertCustFlag=false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>


    <!--    修改-->
    <el-dialog title="修改客户" :visible.sync="updateCustFlag" center>
        <el-form label-width="80px">
            <el-form-item label="客户名称">
                <el-input v-model="updateRow.customerName"></el-input>
            </el-form-item>
            <el-form-item label="联系方式">
                <el-input v-model="updateRow.contact"></el-input>
            </el-form-item>
            <el-form-item label="地址">
                <el-input v-model="updateRow.address"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button @click="doUpdate" type="primary">提交</el-button>
                <el-button @click="updateCustFlag=false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>


</div>

<script>
    new Vue({
        el: "#cust",
        /**
         * data
         */
        data: {
            custList: [],
            insertCustFlag: false,
            updateCustFlag: false,
            labelPosition: 'right',
            updateRow: {},
            treeData: {
                data: [],
                defaultCheckedKeys: []
            },
            vo: {
                name: "",
                pageNo: 1,
                pageSize: 6
            },
            cus: {
                customerName: '',
                contact: '',
                address: '',
                creationDate: ''
            }
        },
        /**
         * methods
         */
        methods: {
            search() {
                axios.get("/cust/search", {params: this.vo})
                    .then(({data}) => {
                        this.custList = data;
                    })
            },
            // 新增
            insertCust() {
                this.insertCustFlag = true;
            },
            doinsert() {
                axios.post("/cust/insert", this.cus)
                    .then(({data}) => {
                        this.insertCustFlag = false;
                        this.$message({
                            message: data.msg,
                            type: data.code == 200 ? 'success' : 'error'
                        });
                        this.search();
                        this.reset();
                    });
            },
            //修改
            updateCust(row) {
                this.updateCustFlag = true;
                this.updateRow = row;
            },
            doUpdate() {
                axios.post('/cust/update', this.updateRow)
                    .then(({data}) => {
                        this.updateCustFlag = false;
                        this.$message({
                            message: data.msg,
                            type: data.code == 200 ? 'success' : 'error'
                        });
                        this.search();
                    });
                this.search();
            },
            //删除
            del(custId) {
                this.$confirm("确实要删除么？", "信息提示")
                    .then(() => {
                        axios.delete("/cust/del?custId=" + custId)
                            .then(({data}) => {
                                this.$message({
                                    message: data.msg,
                                    type: data.code == 200 ? 'success' : 'error'
                                });
                            });
                        this.search();
                    });
            },
            //清空
            reset() {
                this.cus.customerName = '',
                    this.cus.contact = '',
                    this.cus.address = '';
            }
        },
        mounted() {
            this.search();
        }
    })
</script>

</body>
</html>